<template>
        <div class="sign-container">
                <a-card title="注册" class="card">
                        <a-form :model="formState" :rules="rules" name="basic" :label-col="{ span: 8 }"
                                :wrapper-col="{ span: 16 }" autocomplete="off">
                                <a-form-item label="用户名" name="username">
                                        <a-input v-model:value="formState.username" />
                                </a-form-item>

                                <a-form-item label="密码" name="password">
                                        <a-input-password v-model:value="formState.password" />
                                </a-form-item>
                                <a-form-item label="确认密码" name="confirm">
                                        <a-input-password v-model:value="formState.confirm" />
                                </a-form-item>
                                <a-form-item class="signItem" :wrapper-col="{
                                        sm: { span: 16, offset: 8 },
                                }">
                                        <a-button class="sign" type="primary" html-type="submit" @click="register">注册
                                        </a-button>
                                        <router-link to="login" class="to-login">已有账户？去登录</router-link>
                                </a-form-item>
                        </a-form>
                </a-card>
        </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es 而非 ant-design-vue/lib
import router from "router"
import { reactive } from "vue"
import axios from "axios"
const formState = reactive({
        username: "",
        password: "",
        confirm: "",
})
const rules = {
        username: [
                { required: true, message: "请输入用户名", trigger: "blur" },
                {
                        min: 2,
                        message: "用户名必须大于两位",
                        trigger: "blur",
                        whitespace: true,
                        trigger: "blur",
                },
        ],
        password: [
                {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur",
                },
                { required: true, validator: checkData, trigger: "blur" },
        ],
        confirm: [
                {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur",
                        whitespace: true,
                },
        ],
}

Object.freeze(rules)
function register() {
        if (formState.name == "" || formState.password == "") {
                message.success("请输入您的注册信息")
        } else if (formState.password != formState.confirm) {
                message.error("密码不一致")
        } else {
                const data = {
                        user_name: formState.username,
                        user_password: formState.password,
                        user_type: "common",
                        user_onlinestatus: 1,
                        user_isDelete: 1,
                }
                axios.post("http://localhost:3000/user", data).then((res) => {
                        if (res.data.code == 3) {
                                message.error("该用户名已被使用,请更换")
                        } else {
                                router.push("login")
                                message.success("注册成功,请登录");

                        }
                })
        }
}

/* 检查数据 */
function checkData(rule, value, callback) {
        // console.log(rule)
        // console.log(callback())
        console.log(value)
        const nameLength = value.length
        const patten = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/
        const limit = /^(?!_)(?![0-9])/

        if (nameLength) {
                if (nameLength >= 4 && nameLength <= 10) {
                        return Promise.resolve(console.log(1))
                } else {
                        return Promise.reject("密码长度为4-10个字符")
                }
        } else {
                return Promise.resolve()
        }
}
</script>

<style lang="scss" scope>
.sign-container {
        position: fixed;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(142deg,
                        rgba(200, 85, 215, 1) 0%,
                        rgba(144, 233, 157, 1) 51%,
                        rgba(230, 198, 111, 1) 100%);

        .ant-form {
                width: 24vw;
                min-width: 320px;
        }
}

.card {
        position: relative;
        top: 20vh;
        left: 35vw;
        width: 30vw;
        min-width: 400px;
        height: 42vh;
        background: rgb(250 173 20 / 6%);
}

.sign {
        height: 5vh;
        border-radius: 5px;
        border-color: rgb(20, 180, 201);
        background: rgb(20, 180, 201);
        color: white;
        font-size: 15px;
        margin-right: 30px;
}

.to-login {
        line-height: 5vh;
}

// .custom-class {
//         color: red;
//         float: left;
// }
</style>
